<template>
  <div class="container">
    <div class="yibiao">
      <!-- <p>CPU信息</p> -->
      <Echarts :data="option" style="width: 400px; height: 400px;"></Echarts>
    </div>
    <div class="memory">
      <Echarts :data="option1" style="width: 400px; height: 400px;"></Echarts>
    </div>
    <div class="test">
      <Echarts :data="option2" :key="numberkey" style="width: 400px; height: 400px;"></Echarts>
    </div>
  </div>
  <!-- <h1>Name</h1> -->
</template>

<script>
import Echarts from "@/components/ECharts/ECharts.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      numberkey1:1,
      data3: [1],
      option: {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 10,
              fontSize: 16,
            },
            detail: {
              fontSize: 20,
              valueAnimation: true,
              formatter: "{value} %",
              color: "auto",
            },
            data: [
              {
                name: "CPU",
                title: {
                  show: true,
                  offsetCenter: ["0", "-52%"],
                  fontSize: 18,
                },
                value: 70,
              },
            ],
          },
        ],
      },
      option1: {
        title: {
          text: "堆叠区域图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // legend: {
        //   data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        // },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "buffCache",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "free",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "used",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [0, 0, 0, 0, 0, 0, 0],
          },
        ],
      },
      option2: {
        xAxis: {
          max: "dataMax",
        },
        yAxis: {
          type: "category",
          data: ["A", "B", "C", "D", "E"],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: [],
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
            },
          },
        ],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      },
    };
  },
  components: {
    Echarts,
  },
  computed: {
    ...mapState(["sessionId", "CPU", "MEM"]),
  },
  watch: {
    // MEM:{
    //   handler(newValue, oldValue) {
    //     // this.drawLineGraph(this.id, newValue)
    //     console.log("memchange");
    //   },
    //   deep: true,
    // }
    CPU: {
      handler(newValue, oldValue) {
        this.setCpuDate();
      },
      deep: true,
    },
  },
  methods: {
    getDate() {
      this.$http({
        method: "get",
        url: "/resource/mem",
        params: {
          sessionId: this.sessionId,
        },
      }).then((res) => {
        console.log(res);
      });
      this.$http({
        method: "get",
        url: "/resource/cpu",
        params: {
          sessionId: this.sessionId,
        },
      });
    },
    setCpuDate() {
      this.option.series[0].data[0].value = this.CPU.us;
    },
    run() {
      for (var i = 0; i < this.data3.length; ++i) {
        if (Math.random() > 0.9) {
          this.data3[i] += Math.round(Math.random() * 2000);
        } else {
          this.data3[i] += Math.round(Math.random() * 200);
        }
      }
      this.numberkey1 ++
      console.log(this.option2);
      this.option2.series[0].data = this.data3;
    },
    forrr() {
      for (var i = 0; i < 5; ++i) {
        console.log(this.option2);
        this.data3.push(Math.round(Math.random() * 200));
      }
    },
  },
  created() {},
  mounted() {
    this.forrr()
    setTimeout(() => {
      this.run();
    }, 0);
    setInterval(() => {
      this.run();
    }, 3000);

    if (!this.sessionId) {
      setTimeout(() => {
        this.getDate();
      }, 1000);
    } else {
      this.getDate();
    }

    setInterval(() => {
      // console.log(this.MEM.used);
      // console.log("132123123");
      this.option1.series[0].data.splice(0, 1);
      this.option1.series[0].data.push(
        ((this.MEM.buffCache / this.MEM.total) * 100).toFixed(2)
      );
      this.option1.series[1].data.splice(0, 1);
      this.option1.series[1].data.push(
        ((this.MEM.free / this.MEM.total) * 100).toFixed(2)
      );
      // this.option1.series[2].data.splice(0, 1);
      // this.option1.series[2].data.push(this.MEM.total / this.MEM.total);
      this.option1.series[2].data.splice(0, 1);
      this.option1.series[2].data.push(
        ((this.MEM.used / this.MEM.total) * 100).toFixed(2)
      );
    }, 1000);
  },
  beforeDestroy() {
    this.$http({
      method: "delete",
      url: "/resource/mem",
      params: {
        sessionId: this.sessionId,
      },
    }).then((res) => {
      console.log(res);
    });
    this.$http({
      method: "delete",
      url: "/resource/cpu",
      params: {
        sessionId: this.sessionId,
      },
    }).then((res) => {
      console.log(res);
    });
    // clearTimeout(this.getDateTimeout);
    // clearInterval(this.jishiqi);
  },
};
</script>

<style scoped lang="less">
.container {
  display: flex;
}
</style>
